<template>
  <div>
    <div class="header-container">
      <el-button style="margin-right: 10px" @click="onDownloadClick"
        >下载</el-button
      >
      <el-button
        v-if="user.isLogin"
        style="margin-right: 20px"
        @click="onProjectManagerClick"
        >项目管理</el-button
      >
      <span v-if="user.isLogin">
        <span class="user-name">{{ user.name }}</span>
        <el-button round type="danger" @click="onLogoutClick">登出</el-button>
      </span>
      <el-button v-else type="primary" @click="onLoginClick">登录</el-button>
    </div>
    <router-view to="/" v-if="reload" />
    <el-dialog v-model="loginDialog" width="360px" center>
      <template #title>
        <div>用户登录</div>
      </template>
      <el-form :model="form" label-position="top">
        <el-form-item label="用户名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button
          class="dialog-button"
          type="primary"
          @click="onLoginFormSubmit"
        >
          登录
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import client from "@/api/client.js";
import auth from "@/storage/auth.js";
export default {
  name: "AppView",
  components: {
    // Edit, Delete
  },
  created() {
    let _field = this;
    auth.init(function (name) {
      _field.user.isLogin = true;
      _field.user.name = name;
    });
  },
  props: {},
  data() {
    return {
      form: {},
      user: {
        isLogin: false,
        name: "",
      },
      loginDialog: false,
      reload: true,
    };
  },
  methods: {
    onLoginClick() {
      this.loginDialog = true;
    },
    onLogoutClick() {
      this.reload = false;
      auth.logout();
      this.user.isLogin = false;
      this.user.name = "";
      this.$router.push({
        path: "/download",
      });
      this.$nextTick(function () {
        this.reload = true;
      });
    },
    onLoginFormSubmit() {
      let _field = this;
      client
        .login({
          name: _field.form.name,
          password: _field.form.password,
        })
        .then(function (response) {
          if (response.data.code === 200) {
            _field.reload = false;
            let data = response.data.response;
            auth.login(data.userName, data.token, data.roles);
            _field.user.isLogin = true;
            _field.user.name = data.userName;
            _field.loginDialog = false;
            _field.$nextTick(function () {
              _field.reload = true;
            });
          }
        })
        .finally(function () {
          _field.loginDialog = false;
          _field.form = {};
        });
    },
    onProjectManagerClick() {
      this.$router.push({
        path: "/project",
      });
    },
    onDownloadClick() {
      this.$router.push({
        path: "/download",
      });
    },
  },
};
</script>
<style scoped>
.user-name {
  margin-right: 20px;
}
.header-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 40px 120px;
}
#app {
  height: 100%;
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
</style>
